<template>
  <div class="backgroundColor1 container fixed">
    <Header content="历史开奖"></Header>
     <tab :line-width="3" custom-bar-width="60px" class="historyTab" v-model="currentIndex">
      <tab-item
        @on-item-click="changeItem"
        v-for="item,index in quiz_type"
        :key="index"
      >{{item.name}}</tab-item>
    </tab>
    <scroller
      :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
      :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
      lock-x
      height="-90"
      ref="historyAward"
      @on-pullup-loading="onScrollBottom()"
      :use-pullup="true"
      :use-pulldown="true"
      @on-pulldown-loading="onScrollTop()"
    >
      <div class="historyAward">
        <div class="backgroundColor flex historyAwardItem" v-for="item in recordList" v-if="recordList.length>0">
          <div>
            <div class="font14" style="color: #222222;">
              第{{item.periods}}期中奖号码
            </div>
            <div class="font13" style="color: #C3C3C3;">
              {{item.open_time | timestamp('YY-MM-DD HH:MM')}}
            </div>
          </div>
          <div class="font18">
              {{item.win_number}}
          </div>
        </div>
        <div v-if="recordList.length==0" style="text-align: center;padding-top: 200px;">
          暂无数据
        </div>
      </div>
    </scroller>
  </div>
</template>
<script>
  import Header from './common/header.vue'
  import {Tab,TabItem,Scroller } from 'vux'
  export default{
    data(){
      return {
        recordList:[],
        page:{
          page:1,
          pagesize:10,
          total:0,
          quiz_type_id:1
        },
        onFetching1:false,
        onFetching:false,
        quiz_type:[],
        currentIndex:0
      }
    },
    methods:{
      changeItem(index){
        this.currentIndex = index;
        this.page.quiz_type_id = this.quiz_type[index].quiz_type_id;
        this.recordList = [];
        this.onScrollTop();
      },
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.page.page = 1;
          this.recordList = [];
          this.history('pullDown');
        }
      },
      onScrollBottom () {
        if (this.onFetching) {} else {
          this.onFetching = true;
          var that = this;
          that.page.page ++;
          this.history('pullUp');
        }
      },
      history(type){
        this.loading(true);
        this.service('history',{
          quiz_type_id:this.page.quiz_type_id,
          page:this.page.page,
          pagesize:this.page.pagesize
        },'get').then((res)=>{
          this.loading(false);
          this.recordList =  this.recordList.concat(res.data);
          this.page.total = res.meta.pagination.total_pages;
//          this.recordList = [];
//          this.page.total = 0;
          this.$nextTick(() => {
            if(this.page.total == 0 || (this.page.total == this.page.page)){
              this.$refs.historyAward.disablePullup();
              this.$refs.historyAward.reset({top:0});
            }else{
              if(type === 'pullDown'){
                this.$refs.historyAward.reset({top:0});
              }
              this.$refs.historyAward.donePulldown();
              this.$refs.historyAward.enablePullup();
            }
          })
          this.onFetching = false;
          this.onFetching1 = false;
        });
      }
    },
    created(){
      this.quiz_type = JSON.parse(sessionStorage.getItem('quiz_type')).reverse();
      this.changeItem(this.currentIndex)
    },
    components:{
      Header,
      Tab,
      TabItem,
      Scroller
    }
  }
</script>
<style>
  .historyTab .vux-tab .vux-tab-item{
    color: #C3C3C3;
  }
  .historyTab .vux-tab{
    font-size: 15px;
    background: #FAFBFD;
    font-weight: bold;
  }
  .historyAwardItem{
    padding:14px 15px;
    border-bottom: 1px solid #F5F5F5;
  }
  .historyAwardItem>div:nth-last-of-type(1){
    width:36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background: url('../assets/image/ball.png') no-repeat;
    background-size: 100%;
    border-radius: 50%;
    color: #ffffff;
  }
</style>
